CSS美化 CSS片段

Obsidian 样式：定义标题行背景色

可以自定义笔记标题行的背景色和文字颜色，当然你也可以使用 Blue Topaz 这样的主题，配合 obsidian-style-settings 这样的插件达成类似的效果

OS

Pkmer

更多

CSS美化 CSS片段

13 种配色 +4 种格式的方案打造更加生动多彩的表格

在使用 Obsidian 进行知识管理时，表格是最常用的信息组织方式之一，参考官方提供的 Table样式参数 对 Obsidian 的表格样式进行一些调整，设置了 13 种不同配色的表格头部样式和 4 种表格格式，使 Ob 的表格看起来更加生动一些。 250519Obsidian样式：13种配色方案打造多彩表格的样式.md 1. 在 Obsidian 设置中，找到 CSS 片段管理 2. 添加上述 CSS 代码为新的片段 3. 在 Style Setting 插件设置中可以选择以下配置项： 配置项 说明

熊猫别熬夜

Pkmer

更多

CSS美化 设置面板

将 Obsidian 的设置界面的快捷键、核心插件、第三方插件的显示样式变为卡片模式。

本样式参考了 Huajin 的 obsidian-settings-management 插件的样式，将 Obsidian 的设置界面的快捷键、核心插件、第三方插件的显示样式变为卡片模式。 快捷键 核心插件 第三方插件

熊猫别熬夜,Huajin

Pkmer

更多

Checkout CSS美化

Minimal 主题复选框 (Checkout) 样式

240415Obsidian样式：Minimal主题复选框(Checkout)样式.md css / task选择器样式 来自Minimal v7.5.4 by 熊猫别熬夜/ input[data-task="!"]:checked, input[data-task=""]:checked, input[data-task="-"]:checked, input[data-task="<"]:checked, input[data-task=">"]:checked, input[data-task=I]:checked, input[

熊猫别熬夜

Pkmer

更多

CSS美化 界面美化

给 Obsidian 界面添加透明图片背景，可以设置深浅模式不同图片。

给 Obsidian 界面添加透明图片背景，可以设置深浅模式不同图片。 深色模式 浅色模式 - - 241224Obsidian样式：界面透明图片背景.md](https://cdn.pkm

熊猫别熬夜

Pkmer

更多

CSS美化 卡片样式

minimal 主题 Cards 卡片布局

该片段摘自来自 minimal 主题 在 yaml 区用 cssclass 申明 cards 将笔记中的所有 Dataview tables 转换为卡片 Obsidian 样式 - minimal 主题 Cards 卡片布局 Obsidian 样式 - minimal 主题 Cards 卡片布局 要使用排序菜单，请安装 Sortable 插件。这仅与使用数据视图表（而不是项目符号列表）的卡兼容 Obsidian 样式 - minimal 主题 Cards 卡片布局 在 yaml 区用 cssclass 申明 list-car

熊猫别熬夜

Pkmer

更多

CSS美化 css

 Obsidian 1.4.0 更新了全新的 metadata，使得 metadata 不仅可以像原本一样在源码模式下编辑，在实时编辑与阅读模式下也可以进行编辑。 同时，metadata 框的外观也与之前的版本有所不同，现在 metadata 框的外观更加美观，可以以类似表格的形式展示，更加符合 Obsidian 的整体风格。 而在之前的很多读书笔记模板中需要使用特定 CSS 与 Callout 才能达到的效果（如下图）

ProudBenzene

Pkmer

更多

界面美化 CSS美化

Blue Topaz同款Thino美化

由 PKMer 成员维护的 Blue Topaz 主题在最近的更新中加入了对 Thino 插件界面的美化，但是还要一些朋友平时的常用主题并不是 Thino 主题。为了让大家都能体验到 Thino 的全新外观，我将 Blue Topaz 主题中关于 Thino 的部分移植了出来，并于此分享。 以下四张图示分别为 Thino 的列表视图、聊天视图、动态视图与卡片分享界面结合全新现代外观的效果：  ![](https://cdn.

ProudBenzene

Pkmer

更多

CSS美化 内置图片

悬浮侧边栏样式，取消了悬浮展开，单纯的以单击键展开，添加透明度，这样笔记内容不会随着侧边栏的展开而移动

灵感来源于 Obsidian样式-实现TiddlyWiki故事河 的悬浮侧边栏样式，取消了悬浮展开，单纯的以单击键展开，添加透明度，这样笔记内容不会随着侧边栏的展开而移动，同时配合 Obsidian样式-缩减栏宽模式下美化笔记内部背景，来进一步美化空白区。 css / Obsidian 样式 - 实现 TiddlyWiki 故事河 / / @settings name: 悬浮两侧菜单栏 id: Floating-side-menu-bar settings: title: 右侧侧边栏悬浮开关 type: class-

熊猫别熬夜

Pkmer

更多

Excalidraw CSS美化

自动隐藏Excalidraw的工具

该片段来源于 Obsidian 中文社区的 简悟 用户分享，CSS 片段原地址： 

熊猫别熬夜

Pkmer

更多

Border 标题样式

实时编辑下大纲等级符号居右以及 Border 标题 CSS

在实时编辑或者源码模式下，编辑标题时的 会出现左右移动，这里提供 2 种更改大纲等级符号的显示方式的 CSS： - 可能会不小心看不到鼠标光标 - 个人比较推荐 Obsidian样式-实时编辑下大纲等级符号居右以及Border标题CSS css .view-content .markdown-source-view .inline-title { align-self: center; } .markdown-preview-view .mod-header .inline-title { text

熊猫别熬夜

Pkmer

更多

CSS美化 内置图片

美化缩减栏宽模式下的笔记区的空白区域的背景，深浅模式下可以设置不同的网络图片

Obsidian样式-缩减栏宽模式下美化笔记内部背景 在设置的编辑器中进行设置： Obsidian样式-缩减栏宽模式下美化笔记内部背景 可以配合 Editor Width Slider 插件进行调整笔记实际大小的宽度。 Obsidian样式-缩减栏宽模式下美化笔记内部背景 由于阅读和编辑模式的 css 有点不一致，在阅读模式下背景图片可能会遮挡工具栏，这时可通过调整 阅读模式具体图片的高度 的大小来进行一定的调整了。 css / @settings name: 缩减栏框下内部背景 id: background-u

熊猫别熬夜

Pkmer

更多

Obsidian CSS美化

Obsidian 样式：完成任务时如何取消任务文本的删除线

Obsidian 支持任务语法，让我们可以通过勾选框+文本列表的模式，对任务或者时嵌套任务进行管理（具体语法可以参考 Markdown任务列表） 但默认主题和一些主流主题都会在完成任务时，针对任务内容文本进行样式变化，增加一条删除线，有些同学可能会觉得这个样式妨碍阅读。 具体片段方法： 此方法时针对完成任务的设置，如果你的主题还有其他任务状态样式，可以参考下面语法灵活修改。

OS

Pkmer

更多

CSS美化 CSS自定义

Obsidian 外观：1.4 Properties 新特性如何在阅读模式下隐藏

新的 Obsidian 更新带来了很多惊喜，还有更强的稳定性。 但是一些老的示例库仓库，还有 snippets 片段就会失效 比如 BT 示例库中小伙伴就会提问，更新后出现了属性交互菜单影响展示的情况 image.png450 依然可以通过 cssClass 进行处理 在 snippets 下新建样式文件，并输入如下内容 保存成 后缀名.css，文件名大家随意 然后在 Obsidian 设置 -外观 中找到并打开 最后，在你需要隐藏的页面，新增 cssClass 属性，并输入 noprop，即可

OS

Pkmer

更多